<template>
  <div class="facility-process">
    <div class="header">
      <div class="header-content">
        <router-link class="back-btn" to="/main/process">
          <i class="el-icon-arrow-left"></i>
          <span>返回</span>
        </router-link>
        <h2 class="page-title">公共设备设施管理流程</h2>
      </div>
    </div>

    <div class="process-timeline">
      <el-steps :active="currentStep" finish-status="success" align-center>
        <el-step v-for="(step, index) in processSteps" 
                 :key="index" 
                 :title="step.title"
                 @click.native="goToStep(index)">
          <template slot="icon">
            <i :class="step.icon"></i>
          </template>
        </el-step>
      </el-steps>

      <div class="process-content">
        <el-card class="current-step-info">
          <template v-if="currentStepInfo">
            <h3>{{ currentStepInfo.title }}</h3>
            <p class="description">{{ currentStepInfo.description }}</p>
            
            <div class="step-actions">
              <el-form v-if="currentStepInfo.formItems" 
                      :model="formData" 
                      label-width="120px"
                      class="step-form"
                      ref="stepForm">
                <el-form-item v-for="(item, index) in currentStepInfo.formItems"
                             :key="index"
                             :label="item.label">
                  <el-input v-if="item.type === 'input'" 
                           v-model="formData[item.prop]"
                           :placeholder="item.placeholder">
                  </el-input>
                  <el-select v-else-if="item.type === 'select'"
                            v-model="formData[item.prop]"
                            :placeholder="item.placeholder">
                    <el-option v-for="option in item.options"
                             :key="option.value"
                             :label="option.label"
                             :value="option.value">
                    </el-option>
                  </el-select>
                  <el-date-picker v-else-if="item.type === 'date'"
                                v-model="formData[item.prop]"
                                type="date"
                                :placeholder="item.placeholder">
                  </el-date-picker>
                  <el-input v-else-if="item.type === 'textarea'"
                           type="textarea"
                           v-model="formData[item.prop]"
                           :rows="4"
                           :placeholder="item.placeholder">
                  </el-input>
                </el-form-item>
              </el-form>
              
              <div class="button-group">
                <el-button v-if="currentStep > 0" 
                          @click="prevStep">上一步</el-button>
                <el-button type="primary" 
                          @click="nextStep"
                          :disabled="!canProceed">
                  {{ currentStep === processSteps.length - 1 ? '完成' : '下一步' }}
                </el-button>
              </div>
            </div>
          </template>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PublicFacilityProcess',
  data() {
    const validateNumber = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入数量'))
      } else if (isNaN(value)) {
        callback(new Error('请输入数字'))
      } else {
        callback()
      }
    }

    return {
      currentStep: 0,
      formData: {},
      fileList: [],
      submitting: false,
      rules: {
        facilityType: [{ required: true, message: '请选择设施类型', trigger: 'change' }],
        facilityCode: [{ required: true, message: '请输入设施编号', trigger: 'blur' }],
        facilityName: [{ required: true, message: '请输入设施名称', trigger: 'blur' }],
        location: [{ required: true, message: '请选择设施位置', trigger: 'change' }],
        quantity: [
          { required: true, message: '请输入数量', trigger: 'blur' },
          { validator: validateNumber, trigger: 'blur' }
        ],
        maintenancePeriod: [{ required: true, message: '请选择维护周期', trigger: 'change' }],
        facilityBrand: [{ required: true, message: '请输入设施品牌', trigger: 'blur' }],
        manufacturer: [{ required: true, message: '请输入生产厂家', trigger: 'blur' }],
        purchaseDate: [{ required: true, message: '请选择采购日期', trigger: 'change' }],
        warrantyPeriod: [{ required: true, message: '请输入质保期限', trigger: 'blur' }]
      },
      processSteps: [
        {
          title: '设施基本信息',
          shortDesc: '填写设施基础信息',
          icon: 'el-icon-office-building',
          description: '请填写公共设施的基本信息',
          formItems: [
            {
              type: 'select',
              label: '设施类型',
              prop: 'facilityType',
              placeholder: '请选择设施类型',
              required: true,
              options: [
                { label: '电梯设备', value: 'elevator' },
                { label: '空调系统', value: 'air_conditioning' },
                { label: '消防设施', value: 'fire_protection' },
                { label: '安防系统', value: 'security' },
                { label: '照明系统', value: 'lighting' },
                { label: '给排水系统', value: 'water_supply' },
                { label: '公共区域设施', value: 'public_area' }
              ]
            },
            {
              type: 'input',
              label: '设施编号',
              prop: 'facilityCode',
              placeholder: '请输入设施编号',
              required: true
            },
            {
              type: 'input',
              label: '设施名称',
              prop: 'facilityName',
              placeholder: '请输入设施名称',
              required: true
            },
            {
              type: 'select',
              label: '设施位置',
              prop: 'location',
              placeholder: '请选择设施位置',
              required: true,
              options: [
                { label: '一楼大厅', value: 'lobby' },
                { label: '各楼层', value: 'floors' },
                { label: '地下停车场', value: 'parking' },
                { label: '室外公共区域', value: 'outdoor' },
                { label: '设备机房', value: 'equipment_room' }
              ]
            },
            {
              type: 'input',
              inputType: 'number',
              label: '设施数量',
              prop: 'quantity',
              placeholder: '请输入数量',
              required: true,
              unit: '台/套'
            },
            {
              type: 'input',
              label: '设施品牌',
              prop: 'facilityBrand',
              placeholder: '请输入设施品牌',
              required: true
            },
            {
              type: 'input',
              label: '生产厂家',
              prop: 'manufacturer',
              placeholder: '请输入生产厂家',
              required: true
            },
            {
              type: 'date',
              label: '采购日期',
              prop: 'purchaseDate',
              placeholder: '请选择采购日期',
              required: true
            },
            {
              type: 'input',
              label: '质保期限',
              prop: 'warrantyPeriod',
              placeholder: '请输入质保期限',
              required: true,
              unit: '年'
            },
            {
              type: 'input',
              inputType: 'number',
              label: '采购价格',
              prop: 'purchasePrice',
              placeholder: '请输入采购价格',
              unit: '元'
            }
          ],
          tips: [
            '设施编号应符合公司编码规范',
            '准确填写设施位置便于后续管理',
            '设施数量应与实际情况相符'
          ]
        },
        {
          title: '设施详细配置',
          shortDesc: '填写设施配置信息',
          icon: 'el-icon-setting',
          description: '请填写设施的详细配置信息',
          formItems: [
            {
              type: 'select',
              label: '设施等级',
              prop: 'facilityLevel',
              placeholder: '请选择设施等级',
              options: [
                { label: '重要设施', value: 'important' },
                { label: '一般设施', value: 'normal' },
                { label: '辅助设施', value: 'auxiliary' }
              ]
            },
            {
              type: 'textarea',
              label: '设施规格',
              prop: 'specification',
              placeholder: '请输入设施规格参数',
              rows: 4
            },
            {
              type: 'select',
              label: '使用状态',
              prop: 'status',
              placeholder: '请选择使用状态',
              options: [
                { label: '正常使用', value: 'normal' },
                { label: '待维修', value: 'repair' },
                { label: '停用', value: 'stopped' },
                { label: '报废', value: 'scrapped' }
              ]
            },
            {
              type: 'upload',
              label: '设施图片',
              prop: 'images',
              tip: '请上传设施实物图片（支持jpg、png格式）'
            },
            {
              type: 'textarea',
              label: '备注说明',
              prop: 'remarks',
              placeholder: '请输入其他需要说明的信息',
              rows: 3
            },
            {
              type: 'select',
              label: '使用年限',
              prop: 'serviceLife',
              placeholder: '请选择预计使用年限',
              options: [
                { label: '3年以下', value: 'under_3' },
                { label: '3-5年', value: '3_to_5' },
                { label: '5-8年', value: '5_to_8' },
                { label: '8-10年', value: '8_to_10' },
                { label: '10年以上', value: 'above_10' }
              ]
            },
            {
              type: 'select',
              label: '能耗等级',
              prop: 'energyLevel',
              placeholder: '请选择能耗等级',
              options: [
                { label: '一级能效', value: 'level_1' },
                { label: '二级能效', value: 'level_2' },
                { label: '三级能效', value: 'level_3' }
              ]
            },
            {
              type: 'upload',
              label: '技术文档',
              prop: 'technicalDocs',
              tip: '请上传设备说明书、技术参数等文档（支持pdf、doc格式）'
            }
          ],
          tips: [
            '重要设施应详细记录规格参数',
            '及时更新设施使用状态',
            '建议上传清晰的设施图片'
          ]
        },
        {
          title: '维护计划',
          shortDesc: '制定维护计划',
          icon: 'el-icon-time',
          description: '设置设施的维护计划和要求',
          formItems: [
            {
              type: 'select',
              label: '维护周期',
              prop: 'maintenancePeriod',
              placeholder: '请选择维护周期',
              required: true,
              options: [
                { label: '每天', value: 'daily' },
                { label: '每周', value: 'weekly' },
                { label: '每月', value: 'monthly' },
                { label: '每季度', value: 'quarterly' },
                { label: '每半年', value: 'half_yearly' },
                { label: '每年', value: 'yearly' }
              ]
            },
            {
              type: 'select',
              label: '维护类型',
              prop: 'maintenanceType',
              placeholder: '请选择维护类型',
              multiple: true,
              options: [
                { label: '日常检查', value: 'daily_check' },
                { label: '定期保养', value: 'regular_maintenance' },
                { label: '专业维修', value: 'professional_repair' },
                { label: '安全检测', value: 'safety_inspection' }
              ]
            },
            {
              type: 'textarea',
              label: '维护要求',
              prop: 'maintenanceRequirements',
              placeholder: '请输入具体维护要求和标准',
              rows: 4
            },
            {
              type: 'select',
              label: '维护人员',
              prop: 'maintenanceStaff',
              placeholder: '请选择维护人员',
              multiple: true,
              options: [
                { label: '物业人员', value: 'property_staff' },
                { label: '专业维修工', value: 'professional' },
                { label: '外包团队', value: 'outsourcing' }
              ]
            },
            {
              type: 'select',
              label: '维护等级',
              prop: 'maintenanceLevel',
              placeholder: '请选择维护等级',
              options: [
                { label: 'A级（重点维护）', value: 'level_a' },
                { label: 'B级（常规维护）', value: 'level_b' },
                { label: 'C级（定期检查）', value: 'level_c' }
              ]
            },
            {
              type: 'input',
              inputType: 'number',
              label: '维护费用',
              prop: 'maintenanceCost',
              placeholder: '请输入预计年度维护费用',
              unit: '元/年'
            },
            {
              type: 'select',
              label: '维护责任人',
              prop: 'maintenanceResponsible',
              placeholder: '请选择维护责任人',
              options: [
                { label: '设备部主管', value: 'equipment_supervisor' },
                { label: '维修班组长', value: 'maintenance_leader' },
                { label: '物业经理', value: 'property_manager' }
              ]
            },
            {
              type: 'upload',
              label: '维护手册',
              prop: 'maintenanceManual',
              tip: '请上传设备维护手册和操作规程'
            }
          ],
          tips: [
            '维护周期应根据设施重要程度设定',
            '明确维护要求确保维护质量',
            '选择合适的维护人员团队'
          ]
        },
        {
          title: '应急预案',
          shortDesc: '制定应急预案',
          icon: 'el-icon-warning',
          description: '制定设施故障或事故的应急预案',
          formItems: [
            {
              type: 'select',
              label: '风险等级',
              prop: 'riskLevel',
              placeholder: '请选择风险等级',
              options: [
                { label: '高风险', value: 'high' },
                { label: '中风险', value: 'medium' },
                { label: '低风险', value: 'low' }
              ]
            },
            {
              type: 'textarea',
              label: '应急措施',
              prop: 'emergencyMeasures',
              placeholder: '请详细描述应急处理措施',
              rows: 4
            },
            {
              type: 'select',
              label: '应急联系人',
              prop: 'emergencyContacts',
              placeholder: '请选择应急联系人',
              multiple: true,
              options: [
                { label: '物业主管', value: 'property_supervisor' },
                { label: '维修负责人', value: 'maintenance_leader' },
                { label: '安全主管', value: 'safety_supervisor' }
              ]
            },
            {
              type: 'textarea',
              label: '备用方案',
              prop: 'backupPlan',
              placeholder: '请描述备用解决方案',
              rows: 3
            },
            {
              type: 'select',
              label: '应急响应级别',
              prop: 'emergencyLevel',
              placeholder: '请选择应急响应级别',
              options: [
                { label: '一级响应（特别重大）', value: 'level_1' },
                { label: '二级响应（重大）', value: 'level_2' },
                { label: '三级响应（较大）', value: 'level_3' },
                { label: '四级响应（一般）', value: 'level_4' }
              ]
            },
            {
              type: 'input',
              inputType: 'number',
              label: '响应时间',
              prop: 'responseTime',
              placeholder: '请输入最大响应时间',
              unit: '分钟'
            },
            {
              type: 'textarea',
              label: '替代方案',
              prop: 'alternativePlan',
              placeholder: '请描述设备故障时的替代解决方案',
              rows: 4
            },
            {
              type: 'upload',
              label: '应急预案文档',
              prop: 'emergencyPlanDoc',
              tip: '请上传详细的应急预案文档'
            }
          ],
          tips: [
            '根据风险等级制定相应预案',
            '确保应急联系人信息准确有效',
            '定期更新和演练应急预案',
            '应急预案应包含详细的处理流程',
            '定期组织应急演练提高处置能力',
            '建立24小时应急响应机制',
            '做好应急物资储备工作'
          ]
        }
      ]
    }
  },
  computed: {
    currentStepInfo() {
      return this.processSteps[this.currentStep]
    },
    canProceed() {
      return true
    }
  },
  methods: {
    goToStep(index) {
      if (index <= this.currentStep) {
        this.currentStep = index
      }
    },
    prevStep() {
      if (this.currentStep > 0) {
        this.currentStep--
      }
    },
    nextStep() {
      if (this.currentStep < this.processSteps.length - 1) {
        this.currentStep++
      } else {
        this.completeProcess()
      }
    },
    async completeProcess() {
      this.submitting = true
      try {
        await this.$refs.stepForm.validate()
        await new Promise(resolve => setTimeout(resolve, 1000))
        this.$message({
          type: 'success',
          message: '公共设施管理流程已完成',
          duration: 2000
        })
        this.$router.push('/main/process')
      } catch (error) {
        this.$message.error('提交失败，请检查表单填写是否完整')
      } finally {
        this.submitting = false
      }
    },
    handleFileChange(file, fileList) {
      const isValidFormat = (file.name.endsWith('.jpg') || 
                           file.name.endsWith('.png') || 
                           file.name.endsWith('.pdf') || 
                           file.name.endsWith('.doc') || 
                           file.name.endsWith('.docx'))
      const isLt5M = file.size / 1024 / 1024 < 5

      if (!isValidFormat) {
        this.$message.error('文件格式不正确！')
        return false
      }
      if (!isLt5M) {
        this.$message.error('文件大小不能超过 5MB！')
        return false
      }
      this.fileList = fileList.slice(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.facility-process {
  padding: 20px;

  .header {
    margin-bottom: 30px;
    position: relative;
    
    .header-content {
      text-align: center;
    }

    .back-btn {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      text-decoration: none;
      color: #606266;
      display: flex;
      align-items: center;
      cursor: pointer;

      i {
        margin-right: 5px;
      }
    }

    .page-title {
      margin: 0;
      font-size: 24px;
      color: #303133;
    }
  }

  .process-timeline {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);

    .el-steps {
      margin-bottom: 40px;
    }
  }

  .process-content {
    margin-top: 20px;

    .current-step-info {
      text-align: center;

      h3 {
        color: #303133;
        margin-bottom: 10px;
      }

      .description {
        color: #606266;
        margin-bottom: 20px;
      }

      .step-form {
        max-width: 600px;
        margin: 0 auto;
        text-align: left;
      }

      .button-group {
        margin-top: 30px;

        .el-button {
          margin: 0 10px;
        }
      }
    }
  }

  :deep(.el-step__icon) {
    cursor: pointer;
  }
}
</style> 